<template>
    <!-- Echarts 的容器 -->
    <div ref="chart" style="width: 100%; height: 280px; margin-top"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    // 绘制图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.chart);

      // 指定图表配置项和数据
      var option = {
  angleAxis: {
    type: 'category',
    axisLine: {
              lineStyle: {
                color: "white", // 设置轴线颜色为白色
              },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }},
  radiusAxis: { axisLine: {
              lineStyle: {
                color: "white", // 设置轴线颜色为白色
              },},},
  polar: {},
  series: [
    {
      type: 'bar',
      data: [10, 9, 13, 14, 8, 5, 7],
      coordinateSystem: 'polar',
      name: '外卖',
      stack: 'a',
      emphasis: {
        focus: 'series'
      }
    },
    {
      type: 'bar',
      data: [8, 10, 9, 7, 12, 16, 12],
      coordinateSystem: 'polar',
      name: '堂食',
      stack: 'a',
      emphasis: {
        focus: 'series'
      }
    }
  ],
  legend: {
      top:5,
      bottom:10,
    show: true,
     textStyle: {color: "white"},
    data: ['外卖', '堂食']
  },
  grid:{
      top:50

  }
};
myChart.setOption(option);
    },
  },
};
</script>
